<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login登录页面</title>
    <style>
        .box{
            width: 400px;
            height: 300px;
            border: 1px solid black;
            background-color: green;
            position: absolute;/*这个页面是要做登录页面的，除了这个什么也没有，所以这个要位于屏幕的中间 位置要固定*/
            left: 50%;/*以顶点为目标(0,0) 向左移动正的50%*/
            top: 50%;/*以顶点为目标坐标（0，0）从上方移动正的50%
            移动这2步算是移动到盒子的中间了 如果里面还套着盒子且有宽度高度，就需要还有以下设置margin*/
            margin-left: -200px;/*需要div中的div的中心点和第一个div的中心点重合 向左移动是负的宽度的一半即-200px*/
            margin-top: -150px;/*需要div中的div的中心点和第一个div的中心点重合 向上移动负的高度一半即-150px*/
            /*html坐标 以0，0为准，X轴向左是负值，向右是正直；Y轴向上为负值，向下是正值*/
        }
        .box1 {
            height: 192px;   /*看box1里有几行 就用行高30px*几，然后点击审查元素，看看H1的margin padding height是多少加一起
            本项目中是21+21+30=72px 除去这一行还有4行 即30*4=120  那么box1的高度=72+120=192px就是这样得出来的
            */
            /*border: 1px solid black;*/
            position: relative;/*因为父元素的块已经固定，相对于父元素来说，那么需要设置div下的div居于div的中心点即可
             那么需要设置margin-top,div中的div距离div的高度是多少
             */
            margin-top:54px;/*如果不加这一行margin-top=0即div父元素与div子元素的top是重合的 需要下移margin-top
             到div父元素的中心点和div子元素的中心点重合，那么div父元素的height=300px 移动一半是150px div子元素的height=192px
             那么一半是96px  父元素向下移动正的150px，子元素需要向上移动-96px 那么margin-top=150px+（-96px）=54px
             */
            text-align: center;/*文字居中是对h1的更改*/
            line-height: 30px; /*自己设定一个大小*/
        }
        .box1 a{
            text-decoration: none;
        }
    </style>
</head>
<body>

<div>
    <div class="box">
        <div class="box1">
            <h1>用户登录</h1>
            <form action="#">
                用户名:<input type="text" class="name"><br>
                密码&nbsp&nbsp&nbsp:<input type="password" class="password"><br>
                <input type="button" value="登录" style="background: yellow">

            </form>
            <a href="#">立即注册</a>
            <a href="#">忘记密码</a>
       </div>

    </div>
</div>
</body>
</html>